import { UploadOutlined } from "@ant-design/icons";
import { Button, Card, Form, Input, Upload, Select } from "antd";
import { useState } from "react";
import { POST_SCRIPT } from "../../api/scripts";
import WEditor from "../../components/Editor";

function ScriptCreate() {
  let submit = async (values) => {
    console.log(values);
    values.type = values.type.join("、")
    values.url = "http://172.16.3.100:4000" + url
    let res = await POST_SCRIPT(values)
    console.log(res);
  }


  let [url, setUrl] = useState(null);

  // 上传图片事件
  let uploadImg = (info) => {
    // 上传成功
    if (info.file.status === "done") {
      setUrl(info.file.response.data)
      console.log(info);
    }

  }

  return (
    <Card>
      <Form onFinish={submit}>
        {/* <Form.Item name="url" label="图片" valuePropName="fileList"> */}
        <Form.Item label="图片">
          <Upload name="file" action="http://172.16.3.100:4000/api/upload" onChange={(info) => uploadImg(info)}>
            <Button icon={<UploadOutlined />}>上传图片</Button>
          </Upload>
        </Form.Item>
        <Form.Item name="title" label="标题">
          <Input placeholder="请输入标题!"></Input>
        </Form.Item>
        <Form.Item name="content" label="内容">
          <WEditor></WEditor>
        </Form.Item>
        <Form.Item label="类型" name="type">
          <Select
            mode="multiple"
            allowClear
            options={[
              {
                label: "城限",
                value: "城限"
              },
              {
                value: "情感",
                label: "情感"
              },
              {
                value: "现代",
                label: "现代"
              },
              {
                value: "立意",
                label: "立意"
              },
              {
                value: "本格",
                label: "本格"
              },
              {
                value: "惊悚",
                label: "惊悚"
              },
            ]}
          />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit">添加</Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default ScriptCreate;